<template>
  <div>
    <Appheader :parentToChild="ymname" @c_addrname="parentFn" @refresh="refresh"></Appheader>
    <div class="content" v-loading="loading">
      <ul class="list_ul">
        <li
          class="list_li"
          v-for="(list,index) in listarry"
          :key="index"
          @click.stop="see_more(list.id)"
        >
          <div class="img">
            <div class="days">{{list.createtime.split("-")[2]}}</div>
            <div
              class="year_month"
            >{{list.createtime.split("-")[0] +'-'+list.createtime.split("-")[1]}}</div>
          </div>
          <div class="list_li_div">
            <div class="li_div_a">
              <div class="hidden">{{list.title}}</div>
              <!-- <p>{{list.createtime}}</p> -->
            </div>
            <div class="li_div_b hidden3" v-html="list.content.slice(0,260)"></div>
            <div class="li_div_c">
              <!-- <div @click="see_more(list.id)">了解更多</div> -->
            </div>
          </div>
        </li>
        <div class="page" v-if="total!=0">
          <div class="page_a" @click="handleCurrentChange(1)">首页</div>
          <el-pagination
            background
            @current-change="handleCurrentChange"
            :current-page.sync="currentPage"
            layout="prev, pager, next"
            :total="total"
            :page-size="5"
          ></el-pagination>
          <div class="page_a" @click="handleCurrentChange('w')">尾页</div>
        </div>
        <div v-else class="tip2">
          <img src="../../assets/none.png" alt />
        </div>
      </ul>
    </div>
    <Appfooter></Appfooter>
  </div>
</template>

<script>
import Appheader from "./headers";
import Appfooter from "../footer";
import address from "../../../static/address";
import {
  mationlist,
  formationTypelist,
  yikaoziliao,
  ykSchoollist
} from "../../api/index";
export default {
  props: {},
  data() {
    return {
      ymname: "艺考资料",
      type: 0,
      schoolid: "",
      profationId: "",
      address: address,
      major: [],
      c_addr: "全国",
      c_maj: "全部",
      c_maj_id: "",
      zixunType: {
        id: "",
        name: "全部"
      },
      loading: true,
      currentPage: 1,
      total: 0, //列表总数
      pagenum: 1, //请求的页数
      pagesize: 5, //请求的数量
      listarry: [], //请求的数据
      tuijian: "",
      // 学校列表
      Schoollist: [],
      type: 0
    };
  },
  computed: {},
  created() {
    sessionStorage.setItem("nowPage", "yikaoziliaoPd");
  },
  mounted() {
    formationTypelist()
      .then(res => {
        if (res.data.code == 0) {
          res.data.rows.unshift(this.zixunType);
          this.major = res.data.rows;
        }
      })
      .catch(e => {});
    this.type = this.$route.params.type;
    this.ymname = this.$route.params.ziliao || "";
    this.schoolid = this.$route.params.schoolId;
    this.profationId = this.$route.params.profationId;
    // 设置缓存
    if (
      this.profationId == "" ||
      this.profationId == null ||
      this.profationId == undefined
    ) {
      this.profationId = this.$route.params.pId;
      if (
        this.profationId == "" ||
        this.profationId == null ||
        this.profationId == undefined
      ) {
        this.schoolid = localStorage.getItem("schooldId");
        this.ymname = localStorage.getItem("ymname");
        this.profationId = localStorage.getItem("profationId");
        this.type = localStorage.getItem("type");
      }
    }
    this.localStorageSet();
    if (this.type == 1) {
      this.posts(this.ymname, this.type, this.schoolid, this.profationId);
      // this.GetSchoolList();
    } else {
      // this.post();
      this.posts(this.ymname, this.type, "", this.profationId);
    }
  },
  watch: {},
  methods: {
    localStorageSet() {
      localStorage.setItem("schooldId", this.schoolid);
      localStorage.setItem("ymname", this.ymname);
      localStorage.setItem("profationId", this.profationId);
      localStorage.setItem("type", this.type);
    },
    refresh(res) {
      this.type = res.type;
      this.profationId = res.id;
      // this.GetSchoolList();
      this.localStorageSet();
      if (this.type == 1) {
        this.posts(this.ymname, this.type, this.schoolid, this.profationId);
        // this.GetSchoolList();
      } else {
        // this.post();
        this.posts(this.ymname, this.type, "", this.profationId);
      }
    },
    GetSchoolList() {
      let msg = {};
      ykSchoollist(this.qs(msg))
        .then(res => {
          console.log(res);
          this.Schoollist[0] = {
            id: 0,
            name: "全部"
          };
          for (var i = 1; i < res.data.rows.length; i++) {
            this.Schoollist[i] = {
              id: res.data.rows[i - 1].id,
              name: res.data.rows[i - 1].name
            };
          }
          this.c_addr = this.Schoollist[0].name;
          console.log(this.Schoollist);
        })
        .catch(err => {});
    },
    posts(title, type, schoolid, profationId) {
      let msg = {
        type: title,
        itype: type,
        pId: profationId,
        pageNum: this.pagenum,
        pageSize: this.pagesize
      };
      yikaoziliao(this.qs(msg))
        .then(res => {
          // console.log(res);
          if (res.data.code == 0) {
            if (res.data.rows.length != 0) {
              for (let i = 0; i < res.data.rows.length; i++) {
                res.data.rows[i].createtime = res.data.rows[i].createtime.split(
                  " "
                )[0];
              }
            }
            this.listarry = res.data.rows;
            this.total = res.data.total;
          }
          this.loading = false;
        })
        .catch(e => {});
    },
    choose_addr(item) {
      this.c_addr = item;
      this.pagenum = 1;
      this.currentPage = 1;
      this.posts();
    },
    choose_school(id, item) {
      this.c_addr = item;
      this.pagenum = 1;
      this.currentPage = 1;
      this.schoolid = id;
      this.posts(this.ymname, this.type, this.schoolid, this.profationId);
    },
    choose_maj(item, id) {
      if (item.indexOf("推荐") != -1) {
        this.c_maj_id = "";
        this.tuijian = 1;
      } else {
        this.c_maj_id = id;
        this.tuijian = "";
      }
      this.c_maj = item;
      this.pagenum = 1;
      this.currentPage = 1;
      this.posts();
    },
    handleCurrentChange(val) {
      if (val == "w") {
        this.pagenum = Math.ceil(this.total / this.pagesize);
      } else {
        this.pagenum = val;
      }
      this.currentPage = this.pagenum;
      this.loading = true;
      if (this.type == 1) {
        this.posts(this.ymname, this.type, this.schoolid, this.profationId);
        // this.GetSchoolList();
      } else {
        // this.post();
        this.posts(this.ymname, this.type, "", this.profationId);
      }
      document.body.scrollTop = 0;
      document.documentElement.scrollTop = 0;
    },
    //查看更多
    see_more(list_id) {
      sessionStorage.setItem("nowPage", "yikaozixunDetailPd");
      this.$router.push({
        name: "artrecommentdation_dataDetail",
        params: {
          id: list_id
        }
      });
      document.body.scrollTop = 0;
      document.documentElement.scrollTop = 0;
    },
    parentFn(data) {
      this.choose_addr(data);
    }
  },
  components: { Appheader, Appfooter }
};
</script>

<style scoped>
.content {
  width: 1200px;
  margin: 0 auto;
}
/* choose_classify */
.choose_classify {
  background: rgba(246, 245, 244, 1);
  border-radius: 10px;
  padding: 18px 72px 11px 36px;
}
.choose_classify > div {
  display: flex;
}
.choose_classify > div > p {
  margin-top: 2px;
}
.choose_classify > div > p,
.choose_classify li {
  font-size: 14px;
  color: rgba(51, 51, 51, 1);
}
.choose_classify > div > ul {
  flex-wrap: wrap;
  display: flex;
}
.choose_classify li {
  cursor: pointer;
  height: 24px;
  background: rgba(246, 245, 244, 1);
  border-radius: 12px;
  text-align: center;
  line-height: 24px;
  margin-left: 13px;
  margin-bottom: 11px;
  padding: 0 10px;
}
.bg {
  background: #d81417 !important;
  color: #fff !important;
}
.list_li {
  padding: 38px 75px 24px 8px;
  border-top: 1px solid #fff;
  border-bottom: 1px solid #d2d2d2;
  border-top: 1px solid #d2d2d2;
  box-sizing: border-box;
  display: flex;
  cursor: pointer;
}
.list_li > img {
  width: 284px;
  height: 165px;
  margin-right: 35px;
}
.li_div_a {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}
.li_div_a > div {
  width: 580px;
  font-size: 24px;
  font-weight: bold;
  color: rgba(51, 51, 51, 1);
}
.li_div_a > p {
  font-size: 14px;
  color: rgba(153, 153, 153, 1);
}
.li_div_b {
  margin-top: 13px;
  font-size: 14px;
  color: rgba(51, 51, 51, 1);
  line-height: 26px;
  width: 795px;
}
.li_div_c {
  display: flex;
  justify-content: flex-end;
}
.li_div_c > div {
  width: 99px;
  height: 30px;
  border: 1px solid rgba(51, 51, 51, 1);
  font-size: 14px;
  color: rgba(51, 51, 51, 1);
  line-height: 30px;
  text-align: center;
  margin-top: 5px;
  cursor: pointer;
}
.list_li:hover {
  border-top: 1px solid #d81417;
  border-bottom: 1px solid #d81417;
}
/* page */
.page {
  display: flex;
  justify-content: center;
  margin-top: 40px;
  margin-bottom: 75px;
  cursor: pointer;
  display: flex;
  align-items: center;
}
.page >>> .el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: #d81417 !important;
}
.page >>> .el-pager li,
.page >>> .btn-next,
.page >>> .btn-prev {
  width: 34px;
  height: 34px;
  padding: 0;
  line-height: 34px;
  text-align: center;
  border-radius: 5px;
}
.page_a {
  width: 34px;
  height: 34px;
  background: rgba(243, 243, 243, 1);
  border-radius: 5px;
  font-size: 12px;
  color: #333;
  line-height: 34px;
  text-align: center;
}
.page_a:hover {
  background: #d81417;
  color: #fff;
}
.img {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 150px;
  margin-right: 35px;
}
.days {
  font-size: 60px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: rgba(51, 51, 51, 1);
  line-height: 60px;
}
.year_month {
  margin-top: 11px;
  font-size: 18px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: rgba(51, 51, 51, 1);
}
</style>
